<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 只渲染一次，不可以二次修改 -->
			<h2 v-once>{{ message }}</h2>
			<!-- 解释html代码-->
			<h2 v-html="baidu"></h2>
			<!-- 只显示文本 -->
			<h2 v-text="baidu"></h2>
	  		{{ message }}
	  		
	  		<!-- "v-if" 表达式的值为false时，vue直接不渲染，页面不存在该标签；(dom中不存在)
	  			 html中隐藏有两种，一种是不存在，一种是存在但不显示。(dom中存在)
	  		-->
	  		<p v-if="seen">现在你可以看到我！</p>
	  		
	  		<!-- "v-show" 存在但不显示 -->
	  		<h2 v-show="show">存在但不显示</h2>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
			  el: '#app',// 挂载的标签
			  data: {
			    message: 'Hello Vue!',
			    baidu: '<a href="http://www.baidu.com">百度一下</a>',
			    seen: false,
			    show: false
			  }
			})
		</script>
	</body>
</html>
